<template>
  <div id="app">
    <keep-alive exclude="Detail">
      <router-view/>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style lang="postcss">
@svg 1px-border {
  width: 4px;
  height: 4px;
  @rect {
    fill: transparent;
    width: 100%;
    height: 100%;
    stroke-width: 25%;
    stroke: var(--color, black);
  }
}
[border-1px] {
  border: 1px solid;
  border-image: svg(1px-border param(--color #e6e6e6)) 1 stretch;
}
[border-bottom-1px] {
  border: 0;
  border-bottom: 1px solid;
  border-image: svg(1px-border param(--color #e6e6e6)) 1 stretch;
}

[border-top-1px] {
  border: 0;
  border-top: 1px solid;
  border-image: svg(1px-border param(--color #e6e6e6)) 1 stretch;
}
[border-top-bottom-1px] {
  border: 0;
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-image: svg(1px-border param(--color #e6e6e6)) 1 stretch;
}
[border-left-1px] {
  border: 0;
  border-left: 1px solid;
  border-image: svg(1px-border param(--color #e6e6e6)) 1 stretch;
}
[border-right-1px] {
  border: 0;
  border-right: 1px solid;
  border-image: svg(1px-border param(--color #e6e6e6)) 1 stretch;
}
[border-radius] {
  width: 100%;
  height: 100%;
  position: relative;
}

[border-radius]::before {
  content: '' !important;
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  transform-origin: 0 0;
  transform: scale(0.5, 0.5);
  border: 1px solid #fff;
  border-radius: 10px;
  box-sizing: border-box;
}
</style>
